<template>
  <div class="statistics-report">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <img class="h-8 w-auto" src="/logo.png" alt="学生健康上报系统" />
              <span class="ml-2 text-xl font-bold text-gray-800">学生健康上报系统</span>
            </div>
          </div>
          <div class="flex items-center">
            <div class="ml-3 relative">
              <div class="flex items-center space-x-4">
                <Bell class="h-5 w-5 text-gray-500" />
                <div class="flex items-center">
                  <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="" />
                  <span class="ml-2 text-sm font-medium text-gray-700">王校长</span>
                  <ChevronDown class="ml-1 h-4 w-4 text-gray-500" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="flex">
      <!-- 侧边栏 -->
      <aside class="w-64 bg-gray-800 min-h-screen">
        <nav class="mt-5 px-2">
          <div class="space-y-1">
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <LayoutDashboard class="mr-3 h-5 w-5" />
              数据看板
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Users class="mr-3 h-5 w-5" />
              学院管理
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <ClipboardList class="mr-3 h-5 w-5" />
              上报记录
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <AlertTriangle class="mr-3 h-5 w-5" />
              异常管理
            </a>
            <a href="#" class="bg-gray-900 text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <FileText class="mr-3 h-5 w-5" />
              统计报表
            </a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-base font-medium rounded-md">
              <Settings class="mr-3 h-5 w-5" />
              系统设置
            </a>
          </div>
        </nav>
      </aside>

      <!-- 主内容区 -->
      <main class="flex-1 bg-gray-100 p-6">
        <div class="max-w-7xl mx-auto">
          <!-- 页面标题 -->
          <div class="mb-6">
            <h1 class="text-2xl font-semibold text-gray-900">统计报表</h1>
            <p class="mt-1 text-sm text-gray-500">查看和导出学生健康上报数据统计报表</p>
          </div>

          <!-- 报表筛选 -->
          <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">报表类型</label>
                <select 
                  v-model="filters.reportType"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="daily">日报表</option>
                  <option value="weekly">周报表</option>
                  <option value="monthly">月报表</option>
                  <option value="custom">自定义</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">学院</label>
                <select 
                  v-model="filters.college"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
                  <option value="">全部学院</option>
                  <option v-for="college in colleges" :key="college.id" :value="college.id">{{ college.name }}</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">开始日期</label>
                <input 
                  type="date" 
                  v-model="filters.startDate"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">结束日期</label>
                <input 
                  type="date" 
                  v-model="filters.endDate"
                  class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                >
              </div>
            </div>
            <div class="flex justify-end mt-4">
              <button 
                @click="generateReport"
                class="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors flex items-center"
              >
                <RefreshCw class="w-4 h-4 mr-1" />
                生成报表
              </button>
              <button 
                @click="resetFilters"
                class="ml-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors"
              >
                重置
              </button>
              <button 
                @click="exportReport"
                class="ml-2 px-4 py-2 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600 transition-colors flex items-center"
              >
                <Download class="w-4 h-4 mr-1" />
                导出报表
              </button>
            </div>
          </div>

          <!-- 报表概览 -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                    <Users class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">总上报人数</dt>
                      <dd class="flex items-baseline">
                        <div class="text-2xl font-semibold text-gray-900">{{ reportData.totalReports }}</div>
                        <div class="ml-2 flex items-baseline text-sm font-semibold text-gray-600">
                          <span>{{ reportData.totalReportRate }}%</span>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                    <CheckCircle class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">正常上报数</dt>
                      <dd class="flex items-baseline">
                        <div class="text-2xl font-semibold text-gray-900">{{ reportData.normalReports }}</div>
                        <div class="ml-2 flex items-baseline text-sm font-semibold text-gray-600">
                          <span>{{ reportData.normalReportRate }}%</span>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
                    <AlertTriangle class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">异常上报数</dt>
                      <dd class="flex items-baseline">
                        <div class="text-2xl font-semibold text-gray-900">{{ reportData.abnormalReports }}</div>
                        <div class="ml-2 flex items-baseline text-sm font-semibold text-gray-600">
                          <span>{{ reportData.abnormalReportRate }}%</span>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>

            <div class="bg-white overflow-hidden shadow rounded-lg">
              <div class="px-4 py-5 sm:p-6">
                <div class="flex items-center">
                  <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
                    <AlertCircle class="h-6 w-6 text-white" />
                  </div>
                  <div class="ml-5 w-0 flex-1">
                    <dl>
                      <dt class="text-sm font-medium text-gray-500 truncate">未上报人数</dt>
                      <dd class="flex items-baseline">
                        <div class="text-2xl font-semibold text-gray-900">{{ reportData.notReported }}</div>
                        <div class="ml-2 flex items-baseline text-sm font-semibold text-gray-600">
                          <span>{{ reportData.notReportedRate }}%</span>
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 图表区域 -->
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
            <!-- 上报趋势图 -->
            <div class="bg-white rounded-lg shadow-sm p-4">
              <h2 class="text-lg font-medium text-gray-900 mb-4">上报趋势</h2>
              <div class="h-80">
                <canvas ref="reportTrendChart"></canvas>
              </div>
            </div>

            <!-- 异常分布图 -->
            <div class="bg-white rounded-lg shadow-sm p-4">
              <h2 class="text-lg font-medium text-gray-900 mb-4">异常分布</h2>
              <div class="h-80">
                <canvas ref="abnormalDistributionChart"></canvas>
              </div>
            </div>
          </div>

          <!-- 学院上报情况 -->
          <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <h2 class="text-lg font-medium text-gray-900 mb-4">学院上报情况</h2>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学院</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">应上报人数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实际上报人数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上报率</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">正常上报数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常上报数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常率</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(college, index) in collegeReports" :key="index">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ college.name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ college.totalStudents }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ college.reportedCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      <div class="flex items-center">
                        <span class="mr-2">{{ college.reportRate }}%</span>
                        <div class="w-24 bg-gray-200 rounded-full h-2.5">
                          <div 
                            class="bg-blue-600 h-2.5 rounded-full" 
                            :style="{ width: college.reportRate + '%' }"
                          ></div>
                        </div>
                      </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ college.normalCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ college.abnormalCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                      <div class="flex items-center">
                        <span class="mr-2">{{ college.abnormalRate }}%</span>
                        <div class="w-24 bg-gray-200 rounded-full h-2.5">
                          <div 
                            class="bg-red-600 h-2.5 rounded-full" 
                            :style="{ width: college.abnormalRate + '%' }"
                          ></div>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 详细数据表格 -->
          <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-lg font-medium text-gray-900">详细数据</h2>
              <div class="flex space-x-2">
                <button 
                  @click="showDailyData = true; showWeeklyData = false; showMonthlyData = false"
                  :class="{
                    'px-3 py-1 text-sm rounded-md': true,
                    'bg-blue-500 text-white': showDailyData,
                    'bg-gray-100 text-gray-700': !showDailyData
                  }"
                >
                  日数据
                </button>
                <button 
                  @click="showDailyData = false; showWeeklyData = true; showMonthlyData = false"
                  :class="{
                    'px-3 py-1 text-sm rounded-md': true,
                    'bg-blue-500 text-white': showWeeklyData,
                    'bg-gray-100 text-gray-700': !showWeeklyData
                  }"
                >
                  周数据
                </button>
                <button 
                  @click="showDailyData = false; showWeeklyData = false; showMonthlyData = true"
                  :class="{
                    'px-3 py-1 text-sm rounded-md': true,
                    'bg-blue-500 text-white': showMonthlyData,
                    'bg-gray-100 text-gray-700': !showMonthlyData
                  }"
                >
                  月数据
                </button>
              </div>
            </div>

            <!-- 日数据表格 -->
            <div v-if="showDailyData" class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">应上报人数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实际上报人数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上报率</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">正常上报数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常上报数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常率</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(day, index) in dailyData" :key="index">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ day.date }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ day.totalStudents }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ day.reportedCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ day.reportRate }}%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ day.normalCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ day.abnormalCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ day.abnormalRate }}%</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- 周数据表格 -->
            <div v-if="showWeeklyData" class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">周次</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">开始日期</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">结束日期</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">应上报人数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实际上报人数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上报率</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常上报数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常率</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(week, index) in weeklyData" :key="index">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ week.weekNumber }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ week.startDate }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ week.endDate }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ week.totalStudents }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ week.reportedCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ week.reportRate }}%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ week.abnormalCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ week.abnormalRate }}%</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- 月数据表格 -->
            <div v-if="showMonthlyData" class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">月份</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">应上报人数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实际上报人数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上报率</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">正常上报数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常上报数</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">异常率</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="(month, index) in monthlyData" :key="index">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ month.month }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ month.totalStudents }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ month.reportedCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ month.reportRate }}%</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ month.normalCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ month.abnormalCount }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ month.abnormalRate }}%</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- 分页 -->
            <div class="flex items-center justify-between mt-4">
              <div class="flex-1 flex justify-between sm:hidden">
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                  上一页
                </a>
                <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                  下一页
                </a>
              </div>
              <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                  <p class="text-sm text-gray-700">
                    显示第 <span class="font-medium">1</span> 至 <span class="font-medium">10</span> 条，共 <span class="font-medium">{{ totalItems }}</span> 条
                  </p>
                </div>
                <div>
                  <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                      <span class="sr-only">上一页</span>
                      <ChevronLeft class="h-5 w-5" />
                    </a>
                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                      1
                    </a>
                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600 hover:bg-blue-100">
                      2
                    </a>
                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                      3
                    </a>
                    <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                      ...
                    </span>
                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                      8
                    </a>
                    <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                      <span class="sr-only">下一页</span>
                      <ChevronRight class="h-5 w-5" />
                    </a>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Chart, registerables } from 'chart.js';
import {
  Bell,
  ChevronDown,
  LayoutDashboard,
  Users,
  ClipboardList,
  AlertTriangle,
  FileText,
  Settings,
  ChevronLeft,
  ChevronRight,
  Download,
  RefreshCw,
  CheckCircle,
  AlertCircle
} from 'lucide-vue-next';

// 注册Chart.js组件
Chart.register(...registerables);

// 图表引用
const reportTrendChart = ref(null);
const abnormalDistributionChart = ref(null);

// 筛选条件
const filters = ref({
  reportType: 'daily',
  college: '',
  startDate: '2023-05-01',
  endDate: '2023-05-15'
});

// 学院列表
const colleges = ref([
  { id: 'CS001', name: '计算机学院' },
  { id: 'ME002', name: '机械工程学院' },
  { id: 'EM003', name: '经济管理学院' },
  { id: 'FL004', name: '外国语学院' },
  { id: 'AD005', name: '艺术设计学院' }
]);

// 报表数据
const reportData = ref({
  totalReports: 9500,
  totalReportRate: 95,
  normalReports: 9350,
  normalReportRate: 98.4,
  abnormalReports: 150,
  abnormalReportRate: 1.6,
  notReported: 500,
  notReportedRate: 5
});

// 学院上报情况
const collegeReports = ref([
  {
    name: '计算机学院',
    totalStudents: 2000,
    reportedCount: 1950,
    reportRate: 97.5,
    normalCount: 1920,
    abnormalCount: 30,
    abnormalRate: 1.5
  },
  {
    name: '机械工程学院',
    totalStudents: 1800,
    reportedCount: 1710,
    reportRate: 95,
    normalCount: 1680,
    abnormalCount: 30,
    abnormalRate: 1.8
  },
  {
    name: '经济管理学院',
    totalStudents: 2200,
    reportedCount: 2090,
    reportRate: 95,
    normalCount: 2060,
    abnormalCount: 30,
    abnormalRate: 1.4
  },
  {
    name: '外国语学院',
    totalStudents: 1500,
    reportedCount: 1425,
    reportRate: 95,
    normalCount: 1400,
    abnormalCount: 25,
    abnormalRate: 1.8
  },
  {
    name: '艺术设计学院',
    totalStudents: 2000,
    reportedCount: 1900,
    reportRate: 95,
    normalCount: 1870,
    abnormalCount: 30,
    abnormalRate: 1.6
  }
]);

// 详细数据显示控制
const showDailyData = ref(true);
const showWeeklyData = ref(false);
const showMonthlyData = ref(false);

// 日数据
const dailyData = ref([
  {
    date: '2023-05-15',
    totalStudents: 10000,
    reportedCount: 9500,
    reportRate: 95,
    normalCount: 9350,
    abnormalCount: 150,
    abnormalRate: 1.6
  },
  {
    date: '2023-05-14',
    totalStudents: 10000,
    reportedCount: 9600,
    reportRate: 96,
    normalCount: 9450,
    abnormalCount: 150,
    abnormalRate: 1.6
  },
  {
    date: '2023-05-13',
    totalStudents: 10000,
    reportedCount: 9550,
    reportRate: 95.5,
    normalCount: 9400,
    abnormalCount: 150,
    abnormalRate: 1.6
  },
  {
    date: '2023-05-12',
    totalStudents: 10000,
    reportedCount: 9650,
    reportRate: 96.5,
    normalCount: 9500,
    abnormalCount: 150,
    abnormalRate: 1.6
  },
  {
    date: '2023-05-11',
    totalStudents: 10000,
    reportedCount: 9700,
    reportRate: 97,
    normalCount: 9550,
    abnormalCount: 150,
    abnormalRate: 1.5
  }
]);

// 周数据
const weeklyData = ref([
  {
    weekNumber: '第20周',
    startDate: '2023-05-15',
    endDate: '2023-05-21',
    totalStudents: 10000,
    reportedCount: 9600,
    reportRate: 96,
    abnormalCount: 150,
    abnormalRate: 1.6
  },
  {
    weekNumber: '第19周',
    startDate: '2023-05-08',
    endDate: '2023-05-14',
    totalStudents: 10000,
    reportedCount: 9650,
    reportRate: 96.5,
    abnormalCount: 140,
    abnormalRate: 1.5
  },
  {
    weekNumber: '第18周',
    startDate: '2023-05-01',
    endDate: '2023-05-07',
    totalStudents: 10000,
    reportedCount: 9700,
    reportRate: 97,
    abnormalCount: 130,
    abnormalRate: 1.3
  }
]);

// 月数据
const monthlyData = ref([
  {
    month: '2023年5月',
    totalStudents: 10000,
    reportedCount: 9650,
    reportRate: 96.5,
    normalCount: 9500,
    abnormalCount: 150,
    abnormalRate: 1.6
  },
  {
    month: '2023年4月',
    totalStudents: 10000,
    reportedCount: 9700,
    reportRate: 97,
    normalCount: 9570,
    abnormalCount: 130,
    abnormalRate: 1.3
  },
  {
    month: '2023年3月',
    totalStudents: 10000,
    reportedCount: 9750,
    reportRate: 97.5,
    normalCount: 9600,
    abnormalCount: 150,
    abnormalRate: 1.5
  }
]);

// 总条目数
const totalItems = ref(dailyData.value.length);

// 重置筛选
const resetFilters = () => {
  filters.value = {
    reportType: 'daily',
    college: '',
    startDate: '2023-05-01',
    endDate: '2023-05-15'
  };
};

// 生成报表
const generateReport = () => {
  console.log('生成报表:', filters.value);
  // 实际应用中，这里会调用API获取报表数据
  // 然后更新图表和表格数据
};

// 导出报表
const exportReport = () => {
  console.log('导出报表:', filters.value);
  // 实际应用中，这里会调用API导出报表数据
};

// 初始化图表
const initCharts = () => {
  // 上报趋势图
  if (reportTrendChart.value) {
    new Chart(reportTrendChart.value, {
      type: 'line',
      data: {
        labels: ['5月11日', '5月12日', '5月13日', '5月14日', '5月15日'],
        datasets: [
          {
            label: '上报率',
            data: [97, 96.5, 95.5, 96, 95],
            borderColor: 'rgb(59, 130, 246)',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            tension: 0.1,
            fill: true
          },
          {
            label: '异常率',
            data: [1.5, 1.6, 1.6, 1.6, 1.6],
            borderColor: 'rgb(239, 68, 68)',
            backgroundColor: 'rgba(239, 68, 68, 0.1)',
            tension: 0.1,
            fill: true
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            max: 100
          }
        }
      }
    });
  }

  // 异常分布图
  if (abnormalDistributionChart.value) {
    new Chart(abnormalDistributionChart.value, {
      type: 'doughnut',
      data: {
        labels: ['体温异常', '症状异常', '体温和症状', '其他异常'],
        datasets: [
          {
            data: [60, 25, 10, 5],
            backgroundColor: [
              'rgba(245, 158, 11, 0.8)',
              'rgba(139, 92, 246, 0.8)',
              'rgba(239, 68, 68, 0.8)',
              'rgba(75, 85, 99, 0.8)'
            ],
            borderWidth: 1
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            position: 'right',
          }
        }
      }
    });
  }
};

onMounted(() => {
  // 初始化图表
  initCharts();
});
</script>